import React from 'react';
import TodoItem from './TodoItem';

const TodoList = (props) => {
  const { todos, removeTodoItem, toggleTodoItem } = props;

  return (
    <div className="max-w-3xl mx-auto space-y-3">
      {todos.map((todo) => (
        <TodoItem
          key={todo.id}
          {...todo}
          removeTodoItem={removeTodoItem}
          toggleTodoItem={toggleTodoItem}
        />
      ))}
    </div>
  );
};

export default TodoList;
